<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据集生成器</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
<link rel="shortcut icon" href="https://photo-static-api.fotomore.com/creative/vcg/veer/612/veer-377444480.jpg"
      type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<body>
<div id="app" class="container-fluid">
    <el-row type="flex" justify="center" class="container-fluid border d-flex">
        <el-col :span="17">
            <el-checkbox-group v-model="checkList" @change="handleCheckAllChange">
                <el-checkbox label="姓名"></el-checkbox>
                <el-checkbox label="性别"></el-checkbox>
                <el-checkbox label="身高"></el-checkbox>
                <el-checkbox label="家庭住址"></el-checkbox>
                <br>
                <el-checkbox label="年龄"></el-checkbox>
                <el-checkbox label="体重"></el-checkbox>
                <el-checkbox label="号码"></el-checkbox>
                <el-checkbox label="身份证号"></el-checkbox>
            </el-checkbox-group>
        </el-col>
        <el-col :span="7">
            <el-input-number v-model="num" :min="1" label="请输入数据量"></el-input-number>
            <el-button type="primary" @click="InitTable">获取</el-button>
            <el-button type="success" @click="exportData">导出</el-button>
        </el-col>
    </el-row>
    <el-table
            :data="pagedItems"
            v-if="pagedItems.length !== 0"
            width="100%"
            height="85vh"
            style="width: 100%;height: 90vh"
            v-loading="Show"
            element-loading-text="正在生成数据集"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-table-column
                label="序号">
            <template slot-scope="scope">
                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column
                v-for="item in visibleColumns"
                :label="item.label"
                :key="item.label">
            <template slot-scope="scope">
                {{ item.data[(currentPage - 1) * pageSize + scope.$index] }}
            </template>
        </el-table-column>
    </el-table>
    <center><el-pagination
            v-if="pagedItems.length !== 0"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="DefaultList.length">
    </el-pagination>
    </center>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            checkList: [],
            fileList: [],
            List: [],
            num: 10,
            Lists: {
                AgeList: [],
                NameList: [],
                SexList: [],
                CodeList: [],
                CityList: [],
                HeightList: [],
                WeightList: [],
                PhoneList: []
            },
            dataMap:[],
            DefaultList: [],
            Show: false,
            currentPage: 2, // 修改为从第一页开始
            pageSize: 20
        },
        computed: {
            visibleColumns() {
                return this.checkList.map(item => ({ label: item, data: this.Lists[this.dataMap[item]] }));
            },
            pagedItems() {
                const startIndex = (this.currentPage - 1) * this.pageSize;
                return this.DefaultList.slice(startIndex, startIndex + this.pageSize);
            }
        },
        mounted() {

        },

        methods: {
            InitTable() {
                this.Show = true;
                this.DefaultList = Array(this.num).fill(1);
                this.dataMap = {
                    '年龄': 'AgeList',
                    '身份证号': 'CodeList',
                    '家庭住址': 'CityList',
                    '性别': 'SexList',
                    '姓名': 'NameList',
                    '身高': 'HeightList',
                    '体重': 'WeightList',
                    '号码': 'PhoneList'
                };

                for (const item of this.checkList) {
                    this.getData(this.dataMap[item]);
                }
                setTimeout(() => {
                    this.Show = false;
                    this.handleCurrentChange(1)
                }, 8000);
            },
            handleCheckAllChange() {
                this.DefaultList = [];
            },
            async getData(type) {
                try {
                    const response = await axios.get(`http://127.0.0.1:8000/${type.toLowerCase()}?num=${this.num}`);
                    this.Lists[type] = response.data;
                } catch (error) {
                    console.error('Error fetching data:', error);
                }
            },
            exportData() {
                const exportData = this.DefaultList.map((item, index) => {
                    let data = {'序号': index + 1};
                    for (const key of this.checkList) {
                        data[key] = this.Lists[this.dataMap[key]][index];
                    }
                    return data;
                });

                this.exportToCsv(exportData, '数据集');
            },
            exportToCsv(data, filename) {
                const csv = Papa.unparse(data);
                const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.setAttribute('href', url);
                link.setAttribute('download', `${filename}.csv`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
            handleCurrentChange(page) {
                this.currentPage = page;
            }

        }
    })

</script>
</html>
